<template>
  <div class="transferAccount">
    <div class="headerBox">
       <van-nav-bar
        :title="type==1?'通过私钥导入':'创建钱包'"
        left-arrow
        @click-left="goBack"
      ></van-nav-bar>
    </div>
    <div class="formBox">
      <div class="addressBox" v-if="type==1">
        <van-field v-model="secretKey" label="私钥" placeholder="请扫描导出私钥的二维码" :disabled="true" input-align="right" />
        <img src="@/assets/img/wallet/icon_saomiao@2x.png" alt="" class="scannerIcon" @click="scannerFunc">
      </div>
      <van-field v-model="ruleForm.walletName" label="钱包名称" placeholder="请输入钱包名称" input-align="right" />
      <van-field type="text" v-model="ruleForm.payPwd" label="支付密码" placeholder="请输入支付密码" input-align="right" label-width="140px" class="payInput" />
      <van-field type="text" v-model="ruleForm.confirmPayPwd" label="重复支付密码" placeholder="请再次输入支付密码" input-align="right" />
      <div class="agreement">
        <van-checkbox v-model="checked">
          <span class="txt1">我已仔细阅读并同意《服务与隐私条款》</span>
          <template #icon="props">
            <img class="img-icon" src="@/assets/img/wallet/icon_xuan2@2x.png" v-if="props.checked" />
            <img class="img-icon" src="@/assets/img/wallet/icon_xuan1@2x.png" v-else />
          </template>
        </van-checkbox>
      </div>
    </div>
    <div class="handlerBox">
      <p class="handlerBtn handlerBtn1" @click="createWallet">{{type==1?'确认导入':'确认创建'}}</p>
    </div>
    <van-overlay :show="loadingShow">
      <van-loading size="24px" vertical>创建中...</van-loading>
    </van-overlay>

  </div>
</template>

<script>
import {Encrypt,Decrypt} from '@/utils/AES.utils.js'
import {getRsaCode} from '@/utils/RSA.utils.js'
import md5 from 'js-md5';
import FNScanner from "../FNScanner.js";
export default {
  mixins: [FNScanner],
  data() {
    return {
      loadingShow:false,
      secretKey:'',
      checked:true,
      type:'',
      ruleForm:{
        walletAddr:'',
        walletName:'',
        payPwd:'',
        confirmPayPwd:'',
      }
    }
  },
  created(){
    this.type=this.$route.query.type
  },
  watch: {
    scannerContent(val) {
      if (val) {
        this.secretKey=val
      }
    }
  },
  methods:{
    ruleFunc() {
      let rule = /^(?=.*[a-z])(?=.*\d)(?=.*[A-Z])[a-zA-Z\d]{8,16}$/i
      if(!this.ruleForm.walletName) {
        this.$toast('请输入钱包名称')
        return
      } else if(this.ruleForm.walletName.length<2||this.ruleForm.walletName.length>8) {
        this.$toast('钱包名称长度2-8位字符')
        return
      }  else if (!this.ruleForm.payPwd) {
        this.$toast('请输入支付密码')
        return
      } else if(this.ruleForm.payPwd.length<8||this.ruleForm.payPwd.length>16) {
        this.$toast('请输入8-16位字符')
        return
      } else if(!rule.test(this.ruleForm.payPwd)) {
        this.$toast('密码必须包含字母和数字')
        return
      } else if(!this.ruleForm.confirmPayPwd) {
        this.$toast('请输入确认支付密码')
        return
      } else if(this.ruleForm.payPwd!=this.ruleForm.confirmPayPwd) {
        this.$toast('两次密码不一致')
        return
      } else if(!this.checked) {
        this.$toast('请阅读并同意条款')
        return
      } else {
        return true
      }
    },
    async createWallet(){
      if(this.ruleFunc()) {
        this.loadingShow=true
        let res = await this.$http.addUserWallet({walletName:this.ruleForm.walletName});
        if (res) {
          let walletAddr = res.data.walletAddr
          if (walletAddr) {
            this.addUserWallet(res.data)
          }
        } else {
          this.loadingShow = false
        }
      } 
    },
    async addUserWallet(data){
          let userId=JSON.parse(localStorage.getItem('userInfor')).userId
          let wallet = JSON.parse(localStorage.getItem('wallet'))
          wallet[userId][data.walletAddr]={payPwd:Encrypt(this.ruleForm.payPwd),secretKey:data.walletSecretKey}
          localStorage.setItem('wallet',JSON.stringify(wallet))
          this.loadingShow=false
          this.$router.push({name:'walletManage'})
    },

    goBack(){
      this.$router.push({ name: 'walletManage' });
    },
    submit(){

    },
    scannerFunc(){
      this.FNScannerFunc()
    }
  }
};
</script>

<style scoped>
.transferAccount{
  background: #fff;
  min-height: 100vh;
}
.handlerBox{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 2px solid #F1F1F1;
}
.handlerBtn{
  height: 0.82rem;
  line-height: 0.82rem;
  border-radius: 0.41rem;
  text-align: center;
  color: #fff;
  font-size:0.34rem;
  margin: 0 auto;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.handlerBtn1{
  width: 6.94rem;
  background: #00C8E7;
}
.agreement{
  padding: 0.28rem;
}
.txt1{
  font-size: 0.29rem;
  color: #000;
}
.img-icon{
  width: 0.32rem;
  height: 0.32rem;
}
.addressBox{
  position: relative;
}
.scannerIcon{
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  top:0rem;
  right: 0rem;
  padding: 0.22rem 0.28rem 0.2rem 0.2rem;
  box-sizing: content-box;
}
</style>
<style>
.payInput .van-cell__title.van-field__label::after{
  display: inline-block;
  content: '*8-16位字符';
  vertical-align: middle;
  color: #F30F0F;
  margin-left: 0.1rem;
}
.addressBox input{
  padding-right: 0.55rem;
}
.transferAccount .van-loading--vertical{
  padding-top: calc((90vh - 50px)/2);
}
.transferAccount .van-loading__text{
  color: #fff;
}
.transferAccount .van-loading{
  color: #fff;
}
</style>
